<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        falseColorMapping/index.html
    </h1>

    This example shows you how to use the pre-defined colormaps or create a custom lookup table and use them to create a false color mapping

    <div class="row">
        <div class="col-xs-10">
            <div style="width:512px; padding-top: 5px;">
                <canvas id="colorbar" width="512px" height="20px"></canvas>
            </div>

            <div id="dicomImage"
                 style="width:512px;height:512px"
                 oncontextmenu="return false"
                 onmousedown="return false">
            </div>
        </div>
        <div class="col-xs-2">
            <label for="colormaps"> Colormap </label>
            <select id="colormaps" style="width:100%">
                <option value="">Select...</option>
            </select>
        </div>
    </div>
</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    // Populate colormap dropdown with all the default ones available
    // in cornerstone and also a "Custom" option
    function fillColormapsList() {
        const dropdown = document.getElementById('colormaps');
        const colormapsList = cornerstone.colors.getColormapsList();

        const addOption = function(id, name, disabled) {
            const option = document.createElement("OPTION");
            option.value = id;
            option.textContent = name;
            option.disabled = !!disabled;
            dropdown.append(option);
        };

        colormapsList.forEach(function(colormapItem) {
            addOption(colormapItem.id, colormapItem.name);
        });

        // Horizontal Line
        addOption('', '──────────', true);

        addOption('custom', 'Custom');
    }

    // image enable the dicomImage element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    const imageId = 'example://1';

    // Load the example image and display it
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);

        // add event handlers to pan image on mouse move
        element.addEventListener('mousedown', function (e) {
            let lastX = e.pageX;
            let lastY = e.pageY;
            const mouseButton = e.which;

            function mouseMoveHandler(e) {
                const deltaX = e.pageX - lastX;
                const deltaY = e.pageY - lastY;
                lastX = e.pageX;
                lastY = e.pageY;

                if (mouseButton === 1) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.voi.windowWidth += (deltaX / viewport.scale);
                    viewport.voi.windowCenter += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                } else if (mouseButton === 2) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.translation.x += (deltaX / viewport.scale);
                    viewport.translation.y += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                } else if (mouseButton === 3) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.scale += (deltaY / 100);
                    cornerstone.setViewport(element, viewport);
                }
            }

            function mouseUpHandler() {
                document.removeEventListener('mouseup', mouseUpHandler);
                document.removeEventListener('mousemove', mouseMoveHandler);
            }

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        });
    });

    // Dropdown listener to get the new colormap
    // selected by the user and update the image
    function colormapChanged() {
        const viewport = cornerstone.getViewport(element);
        const colormapId = document.getElementById('colormaps').value;
        let colormap;

        // Use selected the first option ("Select...")
        if (colormapId === '') {
            return;
        } else if(colormapId === 'custom') {
            colormap = getCustomLookupTable();
        } else {
            colormap = cornerstone.colors.getColormap(colormapId);
        }

        viewport.colormap = colormap;
        cornerstone.setViewport(element, viewport);
        cornerstone.updateImage(element, true);

        // Update the colorbar at the top of the image
        updateColorbar(colormap);
    }

    function getCustomLookupTable(minPixelValue, maxPixelValue) {
        const colormap = cornerstone.colors.getColormap('myCustomColorMap');
        colormap.setNumberOfColors(6);

        // You can also use `addColor` but in this case it wouldn't work.
        // Any colormap returned by `getColormap` lasts forever (global) and
        // calling `addColor` would result in duplicated colors.
        colormap.insertColor(0, [188, 252, 201, 255]); // Banana
        colormap.insertColor(1, [245, 222, 179, 255]); // Wheat
        colormap.insertColor(2, [255, 125,  64, 255]); // Flesh
        colormap.insertColor(3, [135,  38,  87, 255]); // Raspberry
        colormap.insertColor(4, [227, 206,  87, 255]); // Mint
        colormap.insertColor(5, [ 51, 160, 201, 255]); // Peacock

        return colormap;
    }

    // Update the colorbar at the top of the image
    function updateColorbar(colormap) {
        const lookupTable = colormap.createLookupTable();
        const canvas = document.getElementById('colorbar');
        const ctx = canvas.getContext('2d');
        const height = canvas.height;
        const width = canvas.width;
        const colorbar = ctx.createImageData(512, 20);

        // Set the min and max values then the lookup table
        // will be able to return the right color for this range
        lookupTable.setTableRange(0, width);

        // Update the colorbar pixel by pixel
        for(let col = 0; col < width; col++) {
            const color = lookupTable.mapValue(col);

            for(let row = 0; row < height; row++) {
                const pixel = (col + row * width) * 4;
                colorbar.data[pixel] = color[0];
                colorbar.data[pixel+1] = color[1];
                colorbar.data[pixel+2] = color[2];
                colorbar.data[pixel+3] = color[3];
            }
        }

        ctx.putImageData(colorbar, 0, 0);
    }

    document.getElementById('colormaps').addEventListener('change', colormapChanged);

    fillColormapsList();
</script>
</html>
